<template>
    <div class="mobile-container">
        <div style="position: fixed; top: 0;left: 0;width: 100%; background-color: #2f9296; height: 3.5rem; line-height: 3.5rem; text-align: center; color: #fff; font-size: 1rem; z-index: 100" 
            :value="date"
            @click="show = true"
        >选择日期</div>
        <van-nav-bar
        :title="route.query.variant"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        style="position: fixed; top: 3.5rem; width: 100%;"
        />
        <!-- 数据列表 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="margin-top: 6rem;">
            <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
                <van-row v-for="(item, index) in sensorDataList" :key="index" style="margin: auto 2rem; border-bottom: 1px solid #efefef; height: 2rem; line-height: 2rem;">
                    <van-col span="4">
                        {{ index + 1 }}
                    </van-col>
                    <van-col span="8">
                        {{ item.value }}
                    </van-col>
                    <van-col span="12">
                        {{ item.addtime_format }}
                    </van-col>
                </van-row>
            </van-list>       
        </van-pull-refresh>
        <van-calendar v-model:show="show" type="range" @confirm="onConfirm" />
        <ToolBar/>
    </div>
    
</template>

<script setup>
import {ref} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ToolBar from '@/views/component/ToolBar.vue';
import { sensorData } from '@/api/index';

const route = useRoute();
const router = useRouter();
const sensorDataList = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const page = ref(1);
const limit = ref(25);
const mstart = ref();
const mend = ref();
const countData = ref(0);
const hasMore = ref(true);
const onClickLeft = () => history.back();

// 日历
const date = ref('');
const show = ref(false);

const onConfirm = (values) => {
    const [start, end] = values;
    mstart.value = start.getTime();
    mend.value  = end.getTime();
    show.value = false;
    page.value === 1;
    getSensorData();
};
// 获取数据
const getSensorData = async()=> {
    loading.value = true;
    const res = await sensorData({"number": route.query.number, 'variant_id': route.query.id, 'start': mstart.value, 'end': mend.value, 'page': page.value, 'limit': limit.value    });
    if (res.status === 2000){
        const newData = res.data;
        if (newData.length){
            sensorDataList.value = page.value === 1 ? newData : [...sensorDataList.value, ...newData];
        }else{
            hasMore.value = false;
        }
    }else{
        console.log("加载数据失败");
    };
    loading.value = false;
};
getSensorData();
// 刷新数据
const onRefresh = async() =>{
    page.value = 1;
    refreshing.value = true;
    page.value = 1;
    getSensorData();
    refreshing.value = false;
}

// 加载更多 
const onLoad = async ()=>{
    loading.value = true;
    page.value ++;
    getSensorData();
    if (hasMore){
        loading.value = false;
    }else{
        loading.value = true;
    }
}

</script>

<style scoped>

</style>